/**
 * Created by 高子峰 on 2017/8/5.
 */
'use strict';

require('./index.css');
var _mm = require('util/mm.js');
var templatePagination = require('./index.string');

var Pagination = function(){
    var _this = this;
    this.defaultOption = {
        contain      : null,
        pageNum      : 1,
        pageRange    : 3,   //自己定义的东西，比如现在在第5页，想显示2、3、4页，即要有一个左右浮动的范围
        onSelectPage : null
    };
    //事件的处理
    $(document).on('click','.pg-item',function(){
        var $this = $(this);
        //对于active和disabled按钮点击，不作处理
        if($this.hasClass('active') || $this.hasClass('disabled')){
            return;
        }
        typeof _this.option.onSelectPage === 'function'
            ? _this.option.onSelectPage($this.data('value')) : null;
    });
}

//渲染分页组件
Pagination.prototype.render = function (userOption) {
    // 合并选项
    this.option = $.extend({}, this.defaultOption, userOption); //将一个或多个对象的内容合并到目标对象
    // 判断容器是否为合法的jquery对象
    if(!(this.option.container instanceof jQuery)){
        return;
    }
    // 判断是否只有1页，加入只有一页，那分页的选项就没有必要显示了
    if(this.option.pages <= 1){
        return;
    }
    // 上面的都通过之后就可以开始渲染分页内容
    this.option.container.html(this.getPaginationHtml());
};

// 获取分页的html, 开始设计分页的显示
//以为上面 我们定义了pageRange为3，即左右浮动为3，所以是这样的  |上一页| 2 3 4 =5= 6 7 8|下一页|  5/9
Pagination.prototype.getPaginationHtml = function(){
    var html        = '',
        option      = this.option,  //缓存一下option
        pageArray   = [],   //“上一页”“下一页”以及数字按钮的点击做成一类，这个数组里面存对象
        //要知道页码浮动的最小值（start）和最大值(end)
        start       = option.pageNum - option.pageRange > 0
            ? option.pageNum - option.pageRange : 1,
        end         = option.pageNum + option.pageRange < option.pages
            ? option.pageNum + option.pageRange : option.pages;
    // 上一页按钮的数据
    pageArray.push({
        name : '上一页',   //用来写它呈现的样式
        value : this.option.prePage,    //返回的页码值
        disabled : !this.option.hasPreviousPage //它是否可用，前面加个“!”，如果有前面的页码，disabled就是false
    });
    // 数字按钮的处理
    for(var i = start; i <= end; i++){
        pageArray.push({
            name : i,
            value : i,
            active : (i === option.pageNum) //看是不是当前选中的页
        });
    };
    // 下一页按钮的数据
    pageArray.push({
        name : '下一页',
        value : this.option.nextPage,
        disabled : !this.option.hasNextPage
    });
    html = _mm.renderHtml(templatePagination, {
        pageArray   : pageArray,
        pageNum     : option.pageNum,
        pages       : option.pages
    });
    return html;
};

module.exports = Pagination;//记得导出模块